<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: blue;
      font-size: 30px;
    }

    /* 权重：100 + 10 + 1 */
    #box .p1 span {
      color: cadetblue;
    }

    /* 权重：100 + 1 + 1 */
    #box p span {
      color: blueviolet;
    }
  </style>
</head>

<body>
  <!-- 
    一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中
    层叠次序：内联样式 > 嵌入样式 > 外部样式 > 浏览器默认
   -->
  <p style="color: red;">2222</p>
  <!-- 
    选择器优先级：内联样式 > id选择器 > 伪类选择器 > 属性选择器 > 类选择器 > 标签选择器 > 通配符选择器

    !important，使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试

    选择器权重计算：
    内联样式表的权值最高 1000
    ID 选择器的权值为 100
    Class 类选择器的权值为 10
    HTML 标签选择器的权值为 1

    CSS 优先级法则：
    选择器都有一个权值，权值越大越优先
    当权值相等时，后出现的样式表设置要优于先出现的样式表设置
    继承的 CSS 样式不如后来指定的 CSS 样式
    在同一组属性设置中标有 "!important" 规则的优先级最大
    -->
  <div id="box">
    <p class="p1">red <span>44444</span></p>
  </div>
</body>

</html>